<template>
  <div class="site-category">
    <ul class="site-category-list clearfix site-category-list-custom">
      <li class="category-item" v-for="(item, i) in menuList" :key="i" @mouseenter="ChangeBGC(i)" @mouseleave="getBackBGC(i)">
        <a href="#" class="title" 
        @mouseenter="showMoreGoods(i,item.id)"
        @mouseleave="closeMoreGoods"
          >{{item.title}}
          <em class="right">></em>
        </a>
        <div class="children clearfix" v-if="i === selectedID" @mouseenter="keepShow(item.id)" @mouseleave="closeMoreGoods">
          <ul class="children-list children-list-col" v-for="i in 4" :key="i">
            <li v-for="i in 4" :key="i">
              <a href="" class="link clearfix">
                <img src="../../../assets/imgs/thumb.png" alt="" width="40" height="40" class="thumb" />
                <span class="text">小米10 {{item.title}}</span>
              </a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "LunboMenu",
  data(){
    return {
      menuList: [
        {
          id: 0,
          title: '手机 电话卡'
        },
        {
          id: 1,
          title: '电视 盒子'
        },
        {
          id: 2,
          title: '笔记本 显示器'
        },
        {
          id: 3,
          title: '家电 拆线版'
        },
        {
          id: 4,
          title: '出行 穿戴'
        },
        {
          id: 5,
          title: '智能 路由器'
        },
        {
          id: 6,
          title: '电源 配件'
        },
        {
          id: 7,
          title: '健康 儿童'
        },
        {
          id: 8,
          title: '耳机 音箱'
        },
        {
          id: 9,
          title: '生活 箱包'
        }
      ],
      selectedID: '',
      isActive: false
    }
  },
  methods: {
    //鼠标经过，左侧菜单背景色变化
    ChangeBGC(i){
      document.getElementsByClassName('category-item')[i].style.background = '#ff6700'
    },
    //还原颜色
    getBackBGC(i){
      document.getElementsByClassName('category-item')[i].style.background = ''
    },
    // 鼠标滑过左侧菜单显示右侧菜单
    showMoreGoods(i){
      this.selectedID = i;
    },
    closeMoreGoods(){
      this.selectedID = ''
    },
    //进入右侧菜单保持
    keepShow(id){
      this.selectedID = id
    }
  }
};
</script>

<style lang="less" scoped>
.site-category {
  position: absolute;
  z-index: 21;
  width: 234px;
  height: 460px;
  font-size: 14px;
}
.site-category-list-custom {
  height: 420px;
  border: 0;
  color: #fff;
  background: rgba(105, 101, 101, 0.6);
  .title {
    color: #fff;
    position: relative;
    display: block;
    padding-left: 30px;
    height: 42px;
    line-height: 42px;
  }
  .right {
    font-weight: bold;
    font-size: 1.4rem;
    float: right;
    line-height: 42px;
    margin-right: 20px;
  }
}
.site-category-list {
  margin: 0;
  padding: 20px 0;
  list-style-type: none;
}

// 右侧显示区域
.children {
  width: 992px;
  position: absolute;
  left: 234px;
  top: 0;
  z-index: 24;
  height: 458px;
  background:#fff;
  border: 1px solid #e0e0e0;
  border-left: 0;
  -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
  .children-list {
    width: 248px;
    height: 458px;

    float: left;
    margin: 0;
    padding: 2px 0;
    list-style-type: none;
    li {
      position: relative;
      float: left;
      width: 265px;
      height: 76px;
      .link {
        display: block;
        padding: 18px 20px;
        line-height: 40px;
        color: #333;
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
        .thumb {
          float: left;
          margin-right: 12px;
          vertical-align: middle;
        }
        img {
          border: 0;
        }
        .text {
          float: left;
          width: 172px;
          line-height: 40px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .text:hover{
          color: #ff6700;
        }
      }
    }
  }
}

// 清除浮动

</style>